<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>售货机商品分类标签</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="/static/lib/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/lib/bootstrap-3.3.7/dist/css/bootstrap.css">
    <style>
        .category_delbtn{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="goodsList" style="display: none;margin-top: 30px;">
        <table id="demo" lay-filter="test"></table>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">售货机商品分类列表<button style="float: right;" class="layui-btn layui-btn-sm layui-btn-radius category_addbtn">添加商品分类</button></div>
        <div class="panel-body">
            <ul class="list-group category_info">
                <li class="list-group-item">
                    <i class="layui-icon layui-icon-loading"></i>
                </li>
            </ul>
        </div>
    </div>

<!-- //商品增加和修改 -->
<div id="categoryUpdate" style="display: none;margin-top: 30px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-inline">
                <input id="goodscategory" type="text" name="goodscategory" required lay-verify="required" placeholder="请输入商品分类名称" class="layui-input">
            </div>
        </div>
    </form>
</div>

    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        categoryList()
        
        layui.use(['table','element',], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var element = layui.element;
            
                $(document).off('click','.category_addbtn').on('click','.category_addbtn',function () {
                    $("#goodscategory").val('')
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['660', '500'], //宽高
                        title: '增加商品分类',
                        btn: ['添加','关闭'],
                        content: $('#categoryUpdate'),
                        yes:function(index){
                            var categoryName = $("#goodscategory").val()
                            $.ajax({
                                type: "post",
                                url: "/admin/itemCategory/addCategory",
                                data: {categoryName: categoryName},
                                dataType: "json",
                                async:false,
                                success: function(res){
                                    
                                }
                            })
                            categoryList()
                            layer.close(index);
                        }
                    })
                })

                $(document).off('click','.category_delbtn').on('click','.category_delbtn',function () {
                    var id = $(this).closest('li').attr('in');
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            type: "post",
                            url: "/admin/itemCategory/delCategory",
                            data: {id: id},
                            dataType: "json",
                            async:false,
                            success: function(res){
                                
                            }
                        })
                        categoryList()
                        layer.close(index);
                    })
                })
        });


        function categoryList() {
                $.ajax({
                    type: "get",
                    url: "/admin/itemCategory",
                    data: '',
                    dataType: "json",
                    success: function(res){
                        var tag = ''
                        for (let i = 0; i < res.length; i++) {
                            tag1 = '<li in="'+ res[i].id +'" class="list-group-item"><span class="badge category_delbtn">删除</span>'+ res[i].categoryName +'</li>'
                            tag += tag1
                        }
                        $('.category_info').html(tag) 
                    }
                })
            } 
        
    </script>
</body>
</html>